<template>
	<div class="bodyBot">
		<div class="botBton f f-a-b">
			<div class="list">
				<div @click="goOrder(1, 'Help & support')" class="listTop hand">Help & support</div>
				<div @click="goOrder(2, 'Trust & Safety')" class="listItem hand">Trust & Safety</div>
				<div @click="goOrder(3, 'Xpert Guide')" class="listItem hand">Xpert Guide</div>
				<div @click="goOrder(4, 'KnowClub Guide')" class="listItem hand">KnowClub Guide</div>
				<div @click="goOrder(5, 'Our Story')" class="listItem hand">Our Story</div>
			</div>
			<div class="list">
				<div @click="goOrder(8, 'Press & News')" class="listTop hand">Press & News</div>
				<div @click="goOrder(9, 'Terms of Service')" class="listItem hand">Terms of Service</div>
				<div @click="goOrder(10, 'Privacy Policy')" class="listItem hand">Privacy Policy</div>
				<div @click="goOrder(11, 'Business Solutions')" class="listItem hand">Business Solutions</div>
				<div @click="goOrder(12, 'Enterprise plan')" class="listItem hand">Enterprise plan</div>
			</div>
			<div class="list">
				<div @click="goOrder(15, 'Events')" class="listTop hand">Events</div>
				<div @click="goOrder(16, 'Blog')" class="listItem hand">Blog</div>
				<div @click="goOrder(17, 'Podcast')" class="listItem hand">Podcast</div>
				<div @click="goOrder(18, 'FAQ')" class="listItem hand">FAQ</div>
			</div>
			<div class="list">
				<div @click="goOrder(6, 'Investor')" class="listTop hand">Investor</div>
				<div @click="goOrder(7, 'Career')" class="listItem hand">Career</div>
				<div @click="goOrder(13, 'Partnership')" class="listItem hand">Partnership</div>
				<div @click="goOrder(14, 'Invite a Friend')" class="listItem hand">Invite a Friend</div>
			</div>
		</div>
		<div class="xian"></div>
		<div class="bot">
			<div class="icon f f-a-c f-j-c">
				<img :src="item.value" @click="goLink(item)" v-for="(item, index) in iconList" :key="index" class="iconImg hand" alt="" />
				<!-- <img src="/src/assets/YouTube@2x.png" class="iconImg hand" alt="" />
				<img src="/src/assets/Twitter@2x.png" class="iconImg hand" alt="" />
				<img src="/src/assets/Instagram@2x.png" class="iconImg hand" alt="" />
				<img src="/src/assets/Facebook@2x.png" class="iconImg hand" alt="" /> -->
			</div>
			<div class="xpert f f-a-c f-j-c hand"><img src="/src/assets/Logo_1@2x.png" class="logo" alt="" /></div>
			<div class="botLink hand">XpertBay Inc. 2024 All rights reserved</div>
		</div>
	</div>
</template>

<script setup>
	import { onMounted, ref } from "vue";
	import { BottomBarIcon } from "@/api/knowClub/index.js";
	import { SettingList } from "@/api/commonality.js";
	import router from "@/router/index.js";
	let iconList = ref([]);

	onMounted(() => {
		iconFn();
	});
	const iconFn = async () => {
		let n = await SettingList({ title: "bottom_bar" });
		iconList.value = n.data;
	};
	const goOrder = (num, str) => {
		router.push({
			path: "/OrderManagement",
			query: {
				num: num,
				str: str
			}
		});
	};
	// 跳转外部链接
	const goLink = item => {
		window.open(item.name);
	};
</script>
<style scoped lang="scss">
	@function pxfn($px) {
		@return calc($px / 1.5) * 1px;
	}
	.bot {
		padding: pxfn(64) 0;
		.botLink {
			margin-top: pxfn(40);
			font-size: pxfn(18);
			font-family: Manrope, Manrope-400;
			font-weight: 400;
			text-align: CENTER;
			color: #bcc0c8;
		}
		.icon {
			margin-bottom: pxfn(53);
			.iconImg {
				width: pxfn(26);
				height: pxfn(26);
				margin: 0 pxfn(30);
			}
		}
		.xpert {
			.logo {
				width: pxfn(86);
				height: pxfn(32);
			}
		}
	}
	.xian {
		height: 0;
		width: 90%;
		margin: 0 auto;
		border-bottom: 0.67px solid rgba(255, 255, 255, 0.3);
	}
	.bodyBot {
		width: 100%;
		height: pxfn(745);
		background: #02102e;
		.botBton {
			width: 1280px;
			margin: 0 auto;
			padding: pxfn(65) 0;
			justify-content: space-around;
			.list {
				.listTop {
					font-size: pxfn(21.33);
					font-family: Manrope, Manrope-700;
					font-weight: 700;
					text-align: LEFT;
					color: #ffffff;
					margin-bottom: pxfn(32);
				}
				.listItem {
					font-size: pxfn(18.6);
					font-family: Manrope, Manrope-400;
					font-weight: 400;
					text-align: LEFT;
					color: #bcc0c8;
					margin-bottom: pxfn(20);
				}
			}
		}
	}
</style>
